<template>
	<n-modal
		class="base-popup-small text-t-1"
		:show="modelValue"
		:on-mask-click="onClose"
		:trap-focus="false"
		v-bind="$attrs">
		<div class="w-[374px] bg-bg-1 rounded flex flex-col pt-7 px-6 pb-12">
			<div class="flex justify-between">
				<base-text class="text-xl" :text="title" :textT="titleT" />
				<base-icon
					name="close"
					class="text-[20px] cursor-pointer"
					@click="onClose"
					v-if="!hideCloseButton" />
			</div>
			<slot></slot>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import { NModal } from 'naive-ui'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'

defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	hideCloseButton: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['update:modelValue', 'close'])

const onClose = () => {
	emits('update:modelValue', false)
	emits('close')
}
</script>
<style lang="scss" scoped></style>
